<template>
  <div>
    <button @click="addCount">点击+1</button>
    <br />
    <input type="text" v-model="res" />
    <input type="text" v-model="msg" />
    <input type="text" v-model="msg1" />
    <br />
    <div>{{ arr }}</div>

    <div>{{ res }}</div>
    <div>{{ r }}</div>
    <div>{{ msg }}</div>
    <div>{{ msg1 }}</div>
    <div>{{ obj }}</div>


  </div>
    <button @click="changeMessage">按钮</button>
  <div>
    <About :obj="obj" :handleObj="handleObj" />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, nextTick } from "vue";
import About from "./components/About.vue";
export default defineComponent({
  setup() {
    const message = ref("Hello!");
    const changeMessage = async (newMessage: string) => {
      message.value = newMessage;
      await nextTick();
      console.log("Now DOM is updated");
    };

    let arr = reactive([10, 20, 30]);
    const obj = reactive({
      name: "dxk",
      age: 18,
      hobby: ["cx", "mm", "ks"],
    });

    const msg1 = ref("dxk");

    let r = ref(0);

    let res = computed({
      get() {
        return arr.reduce((it, cr) => it + cr);
      },
      set(val: number) {
        r.value = Number(val);
      },
    });

    return {
      arr,
      res,
      r,
      msg1,
      obj,
      changeMessage
    };
  },
  data() {
    return {
      msg: "hahaah",
    };
  },
  methods: {
    addCount() {
      for (let index = 0; index < this.arr.length; index++) {
        this.arr[index] += 1;
      }
    },
    handleObj() {
      this.obj.age += 1;
    },
  },

  updated() {
    console.log(this.arr);
    console.log(this);
  },
  components: {
    About,
  },
});
</script>

<style scoped>
</style>